<template>
    <div class="box">
        <div class="box_form">
            <el-card class="box-card">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="围栏名称" prop="fenceName">
                        <el-input v-model="ruleForm.fenceName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="isAvailable">
                        <el-switch v-model="ruleForm.isAvailable" disabled :active-value="1"
                            :inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item label="围栏地址" prop="fenceAddress">
                        <el-input type="textarea" v-model="ruleForm.fenceAddress" disabled></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <el-page-header @back="goBack" content="电子围栏绘制">
                </el-page-header>
            </el-header>

            <!-- 中间 -->
            <el-main>
                <!-- 地图 -->
                <div id="map-container"></div>
            </el-main>
        </el-container>
    </div>


</template>
<script>
import { getPrence } from "@/api/car/pence";
export default {
    name: "AddPence",

    data() {
        return {
            name: "draw",
            center: { lng: 116.93761, lat: 40.059866 }, // 中心点坐标
            zoom: 11, // 缩放级别
            location: "吉安市",
            keyword: "",
            radioSelect: "none",
            styleOptions: {
                strokeColor: "#5E87DB", // 边线颜色
                fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
                strokeWeight: 2, // 边线宽度，以像素为单位
                strokeOpacity: 1, // 边线透明度，取值范围0-1
                fillOpacity: 0.2, // 填充透明度，取值范围0-1
            },
            labelOptions: {
                borderRadius: "2px",
                background: "#FFFBCC",
                border: "1px solid #E1E1E1",
                color: "#703A04",
                fontSize: "12px",
                letterSpacing: "0",
                padding: "5px",
            },
            map: null, // 百度地图
            drawingManager: null, // 鼠标绘制工具
            localSearch: null, // 地区检索
            region: {}, // 行政区域
            ruleForm: {
                fenceName: '',
                fenceType: 1,
                shapes: '',
                fenceAddress: '',
                isAvailable: 1,
            },
            rules: {
                fenceName: [
                    { required: true, message: '请输入围栏名称', trigger: 'blur' },
                ],
                fenceAddress: [
                    { required: true, message: '请填围栏地址', trigger: 'blur' }
                ]
            }
        };
    },

    watch: {
        // 绘制类型变更
        radioSelect(nval, oval) {
            if (nval != "none") {
                this.clearOverlays();
                this.drawingManager.close();
                this.draw(nval);
            } else {
                this.drawingManager.close();
            }
        },
        // 地区检索关键字变更
        keyword(nval, oval) {
            this.localSearch.clearResults();
            this.localSearch.search(nval);
        },
    },

    mounted() {

        // 创建Map实例
        this.map = new BMap.Map("map-container", {
            enableMapClick: false,
            minZoom: 5,
            maxZoom: 15,
        });
        // 设置中心点坐标和地图级别
        this.map.centerAndZoom(
            new BMap.Point(this.center.lng, this.center.lat),
            this.zoom
        );
        // 开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true);

        // 创建鼠标绘制工具
        this.drawingManager = new BMapLib.DrawingManager(this.map, {
            // isOpen: true, //是否开启绘制模式
            enableCalculate: true, // 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
            drawingToolOptions: {
                enableTips: true,
                customContainer: "selectbox_Drawing",
                hasCustomStyle: true,
                offset: new BMap.Size(5, 5), // 偏离值
                scale: 0.8, // 工具栏缩放比例
                drawingModes: [
                    BMAP_DRAWING_RECTANGLE,
                    BMAP_DRAWING_POLYGON,
                    BMAP_DRAWING_CIRCLE,
                ],
            },
            enableSorption: true, // 是否开启边界吸附功能
            sorptionDistance: 20, // 边界吸附距离
            enableGpc: true, // 是否开启延边裁剪功能
            enbaleLimit: true, // 是否开启超限提示
            // limitOptions: {
            //     area: 50000000 // 面积超限值
            // },
            circleOptions: this.styleOptions, // 圆的样式
            polylineOptions: this.styleOptions, // 线的样式
            polygonOptions: this.styleOptions, // 多边形的样式
            rectangleOptions: this.styleOptions, // 矩形的样式
            labelOptions: this.labelOptions, // label的样式
        });

        // 实例化地区检索
        this.localSearch = new BMap.LocalSearch(this.map, {
            renderOptions: { map: this.map, panel: "search-result" },
        });
        this.getEdit()
    },

    methods: {
        // 获取详情
        getEdit() {
            getPrence(this.$route.query.id).then((res) => {
                if (res.code == 200) {
                    this.ruleForm = res.data
                    // 加载围栏数据
                    if (res.data.shapes)
                        this.loadHurdle(res.data.shapes);
                }
            })
        },
        // 加载围栏数据
        async loadHurdle(data) {
            const points = JSON.parse(data)
            console.log(points, 'pointspoints')
            var pointsStr = []
            pointsStr.push(this.pointsToStr(points[0]))
            console.log(pointsStr, 'pointsStr')
            var pathArr = [];
            pointsStr.forEach((item) => {
                var ply = new BMap.Polygon(item, this.styleOptions); //建立多边形覆盖物
                this.map.addOverlay(ply); //添加覆盖物
                pathArr = pathArr.concat(ply.getPath());
            });
            console.log(pathArr, 'pathArrpathArr')
            this.map.setViewport(pathArr); //调整视野
        },

        // 返回
        goBack() {
            this.$router.back()
            this.$store.dispatch('tagsView/delView', this.$route)
        },

        // 坐标点数组转字符串
        pointsToStr(points) {
            if (!points) return "";
            var str = "";
            points.forEach((item) => {
                str += item.lng + "," + item.lat + ";";
            });
            return str.slice(0, -1);
        },
    },
};
</script>

<style>
.box {
    width: 100%;
    height: 80vh;
    position: relative;
}

.box_form {
    position: absolute;
    top: 10%;
    left: 1%;
    z-index: 9999
}

.el-container {
    height: 100%;
}

.el-main {
    position: relative;
    padding: 0;
}

.el-page-header,
.el-footer {
    line-height: 60px;
}

.rg-select__el {
    background: #ffffff !important;
}

#map-container {
    width: 100%;
    height: 100%;
}

#search-result {
    width: 400px;
}

.s-control-l {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 999;
}

.s-control-r {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 999;
}

.s-search {
    width: 400px;
}

.s-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.s-icon.s-icon-select {
    background-image: url();
}

.el-radio-button.is-active .s-icon.s-icon-select {
    background-image: url();
}

.s-icon.s-icon-circle {
    background-image: url();
}

.el-radio-button.is-active .s-icon.s-icon-circle {
    background-image: url();
}

.s-icon.s-icon-polygon {
    background-image: url();
}

.el-radio-button.is-active .s-icon.s-icon-polygon {
    background-image: url();
}

.s-icon.s-icon-rectangle {
    background-image: url();
}

.el-radio-button.is-active .s-icon.s-icon-rectangle {
    background-image: url();
}
</style>